<template>
	<view class="container">
		<navbar title="分类" :isBack="false"></navbar>
		<view class="classify" :style="{paddingTop: getNavbarHeight()  + 'px'}">
			<view class="search">
				<uv-input v-model="keyWord" placeholder="请输入关键字进行搜索" :customStyle="searchCustomStyle" fontSize="28rpx"
					@confirm="searchChange" clearable inputAlign="left">
					<template v-slot:prefix>
						<image class="img" src="https://qn.mtj.cdydsy.com/user_client/static/icons/ss.png"></image>
					</template>
					<template v-slot:suffix>
						<button class="button" @tap="searchChange">搜索</button>
					</template>
				</uv-input>
			</view>
			<loading v-if="isLoading" :height="windowHeight - 85"></loading>
			<view class="tabs">
				<uv-tabs :list="efficacyList" :itemStyle="tabsItemStyle" keyName="name"
					:inactiveStyle="tabInactiveStyle" :activeStyle="tabActiveStyle" :lineHeight="3" lineWidth="112rpx"
					lineColor="#000000" @change="tabsChange">
				</uv-tabs>
			</view>
			<view class="category" v-if="!isLoading">
				<uv-vtabs :chain="false" :height="categoryHeight" :current="leftIndex" :list="categoryList"
					@change="leftChange" keyName="name" barBgColor="#F5F5F5" :barItemStyle="barItemStyle"
					:barItemActiveStyle="barItemActiveStyle" :barItemActiveLineStyle="barItemActiveLineStyle"
					@scrolltolower="scrolltolower">
					<uv-vtabs-item>
						<view class="product" v-if="productLists.length">
							<view class="product-header u-flex-between">
								<view class="left">热卖推荐</view>
								<view class="right u-flex" v-if="params.order_type === 1">
									<text class="text" @click="newChange">新品</text>
									<view class="right-price u-flex" @click="priceChange">
										<text class="text">价格</text>
										<image src="https://qn.mtj.cdydsy.com/user_client/static/icons/rise.png"
											mode="aspectFill" class="image"></image>
									</view>
								</view>
								<view class="right u-flex" v-else>
									<text :class="[params.order_type === 2?'text-active':'text']"
										@click="newChange">新品</text>
									<view class="right-price u-flex" @click="priceChange">
										<text :class="[params.order_type === 3?'text-active':'text']">价格</text>
										<image
											:src="params.order_type === 3 && params.price_order === 1?'https://qn.mtj.cdydsy.com/user_client/static/icons/rise.png':'https://qn.mtj.cdydsy.com/user_client/static/icons/drop.png'"
											mode="aspectFill" class="image"></image>
									</view>
								</view>
							</view>
							<view class="product-content">
								<view class="li u-flex-between u-col-start" v-for="item in productLists" :key="item.id">
									<zero-lazy-load :borderRadius="16" :height="164" imgMode='aspectFill'
										:image="item.cover_image" class="li-image"></zero-lazy-load>
									<view class="li-right u-flex-between u-flex-col u-col-start">
										<view class="li-name">{{item.name}}</view>
										<view class="li-footer u-flex-between">
											<view>
												<span class="icon">￥</span>
												<span class="price">{{item.price}}</span>
												<span class="origin-price">{{item.minPriceSpec.original_price}}</span>
											</view>
											<view class="footer-right u-flex-center">
												<uni-icons type="cart" size="20" color="#FFFFFF"></uni-icons>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<loadmore v-if="productLists.length" :type="loadmoreStatus"></loadmore>
						<empty v-if="!productLists.length" :height="500" text="暂无数据哦~"></empty>
					</uv-vtabs-item>
				</uv-vtabs>
			</view>
		</view>
		<tabbar class="tabbar" :current="1"></tabbar>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted, watch } from 'vue';
	import { getNavbarHeight } from '@/utils/system.js'
	import { navigateTo } from '@/utils/router.js'
	import { apiProductCategoryOrBrand, apiEfficacyCategoryGetProduct } from '@/api/classify.js'
	onLoad(() => {
		// #ifndef MP-WEIXIN
		uni.hideTabBar();
		// #endif
	})

	const { windowHeight } = wx.getWindowInfo();
	const keyWord = ref('')
	const categoryHeight = ref(0)
	const searchCustomStyle = {
		backgroundColor: '#FFFFFF',
		padding: '4rpx 6rpx 4rpx 20rpx',
		borderRadius: "0rpx"
	}
	const searchPlaceholderStyle = {
		fontSize: '28rpx',
		color: '#CACACA',
	}

	const tabInactiveStyle = {
		padding: '22rpx 31rpx',
		background: '#DEDEDE',
		lineHeight: 1,
		borderRadius: '34rpx',
		fontSize: '24rpx',
		color: '#FFFFFF',
	}
	const tabActiveStyle = {
		padding: '22rpx 31rpx',
		background: '#000000',
		lineHeight: 1,
		borderRadius: '34rpx',
		fontSize: '24rpx',
		color: '#FFFFFF',
	}
	const tabsItemStyle = {
		paddingBottom: '10px'
	}

	const barItemStyle = {
		fontSize: '26rpx',
		color: '#626262'
	}

	const barItemActiveStyle = {
		fontSize: '26rpx',
		color: '#000000'
	}

	const barItemActiveLineStyle = {
		width: "8rpx",
		height: "58rpx",
		top: "50%",
		transform: "translateY(-50%)",
		borderRadius: "0rpx 8rpx 8rpx 0rpx",
		background: "#000000",
	}

	let params = {
		page: 1,
		pageSize: 10,
		order_type: 1, // 1: 默认排序, 2: 新品, 3: 价格
		price_order: 1, // 1: 升序, 2: 倒序
		efficacy_id: "",
		category_id: "",
		brand_id: "",
	}
	const categoryList = ref([])
	const efficacyList = ref([])
	const productLists = ref([])
	const loadmoreStatus = ref(2)
	const noData = ref(false)
	const leftIndex = ref(0)
	const tabsIndex = ref(0)
	const isLoading = ref(true)

	// 获取分类列表
	const getProductCategoryOrBrand = async () => {
		const { data } = await apiProductCategoryOrBrand()
		categoryList.value = data.category
		efficacyList.value = data.efficacy
	}

	// 获取对应的商品列表
	const getEfficacyCategoryGetProduct = async () => {
		try {
			const { data } = await apiEfficacyCategoryGetProduct(params)
			productLists.value = [...productLists.value, ...data.data]
			if (params.pageSize > data.data.length) {
				noData.value = true
				loadmoreStatus.value = 3
			}
		} finally {
			isLoading.value = false
			uni.hideLoading()
		}
	}

	// 重置商品列表
	const resetProductList = (order_type = 1, price_order = 1) => {
		productLists.value = []
		loadmoreStatus.value = 2
		noData.value = false
		params = {
			page: 1,
			pageSize: 10,
			order_type, // 1: 默认排序, 2: 新品, 3: 价格
			price_order, // 1: 升序, 2: 倒序
			efficacy_id: efficacyList.value[tabsIndex.value].id,
			category_id: categoryList.value[leftIndex.value].id,
			brand_id: "",
		}
		getEfficacyCategoryGetProduct()
	}

	// 左边tab点击事件
	const leftChange = (e) => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		leftIndex.value = e
		resetProductList()
	}

	// 头部tab点击事件
	const tabsChange = (e) => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		tabsIndex.value = e.index
		resetProductList()
	}

	// 新品点击事件
	const newChange = () => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		resetProductList(2)
	}

	// 价格点击事件
	const priceChange = () => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		const order_type = 3
		params.price_order = params.price_order === 1 ? 2 : 1;
		resetProductList(order_type, params.price_order)
	}

	// 搜索
	const searchChange = (e) => {
		navigateTo(`/subPackages/search/list?keyword=${e}&mod_type=1`)
	}

	// 获取元素的高度
	const getElementHeight = (selector) => {
		return new Promise((resolve) => {
			const query = uni.createSelectorQuery();
			query.select(selector).boundingClientRect((rect) => {
				if (rect) {
					resolve(rect.height);
				} else {
					resolve(0);
				}
			}).exec();
		});
	};

	onMounted(async () => {
		await getProductCategoryOrBrand()
		const searchHeight = await getElementHeight('.search');
		const tabsHeight = await getElementHeight('.tabs');
		const tabbarHeight = await getElementHeight('.tabbar');
		categoryHeight.value = windowHeight - (getNavbarHeight() + searchHeight + tabsHeight + tabbarHeight +
			18);
		resetProductList()
	});

	// 触底加载更多
	const scrolltolower = (e) => {
		if (noData.value) return;
		loadmoreStatus.value = 1
		params.page++
		getEfficacyCategoryGetProduct()
	}
</script>

<style lang="scss">
	.container {
		.classify {
			.search {
				padding: 18rpx 28rpx 0;


				.img {
					width: 28rpx;
					height: 26rpx;
					display: block;
				}

				.button {
					height: 56rpx;
					background-color: $base-color;
					font-size: $font-size-28;
					color: #CACACA;
					line-height: 56rpx;
					border-radius: 0rpx;
				}
			}

			.tabs {
				padding: 40rpx 28rpx 0 0;
			}

			.category {
				padding-top: 36rpx;

				.product {
					.product-header {
						width: 100%;
						padding: 0 40rpx 0 28rpx;
						position: sticky;
						top: 0;
						left: 0;
						background-color: rgba(255, 255, 255, 0.8);
						z-index: 9;

						.left {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: $font-size-28;
							color: $base-price-color;
						}

						.right {
							.text {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: $font-size-28;
								color: $base-origin-price-color;
							}

							.right-price {
								.text {
									padding: 0 18rpx;
								}

								.text-active {
									padding: 0 18rpx;
								}
							}

							.text-active {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: $font-size-28;
								color: $base-color;
							}

							.image {
								width: 24rpx;
								height: 24rpx;
								display: block;
							}
						}
					}

					.product-content {
						padding: 0 28rpx;

						.li {
							padding: 30rpx 0;
							border-bottom: 1px solid #EEEEEE;

							.li-image {
								width: 164rpx;
								height: 164rpx;
								box-shadow: $base-box-shadow;
								border-radius: 16rpx;
								display: block;
							}

							.li-right {
								height: 164rpx;
								flex: 1;
								padding-left: 34rpx;

								.li-name {
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: $font-size-28;
									color: $base-color;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
								}

								.li-footer {
									width: 100%;

									.icon {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 500;
										font-size: $font-size-24;
										color: $base-price-color;
									}

									.price {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 500;
										font-size: $font-size-28;
										color: $base-price-color;
									}

									.origin-price {
										font-family: Source Han Sans CN, Source Han Sans CN;
										font-weight: 400;
										font-size: $font-size-20;
										color: $base-origin-price-color;
										padding-left: 10rpx;
									}

									.footer-right {
										width: 56rpx;
										height: 56rpx;
										background: #000000;
										border-radius: 50%;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>